import React, { useEffect, useState } from 'react'
import { NavBar } from 'antd-mobile'
import { Sticky, Cell } from 'react-vant'
import { GuideO } from '@react-vant/icons';
import { EnvironmentOutline } from 'antd-mobile-icons'
import axios from 'axios';
import { useNavigate } from 'react-router-dom';

export default function Address() {
  let nav=useNavigate()
  let [address, setAddress] = useState(sessionStorage.getItem('address') || '定位地址')
  let [getAddress, setGetAddress] = useState(sessionStorage.getItem('getAddress') || false)
  let [addLs,setAddLs]=useState([])
  const back = () => {
    window.history.back();
  }
  let getAddls = async () => {
    let result = await axios.get('http://localhost:3000/zhaojunjie/address?userId=' + sessionStorage.getItem('userId'))
    if (result.data.code === 200) {
      setAddLs(result.data.data.address)
    }
  }
  useEffect(() => {
    setAddress(sessionStorage.getItem('address') || '定位地址')
    getAddls()
  }, [])
  useEffect(() => {
    sessionStorage.setItem('curAddress',address)
  },[address])
  return (
      <div className='address'>
        <Sticky>
            <NavBar onBack={back} style={{ borderBottom: '1px solid gainsboro', padding: '5px 0', fontSize: '20px', fontWeight: '600', backgroundColor: 'white' }}>选择地址</NavBar>
        </Sticky>
      <Cell style={{ fontSize: '16px', borderBottom: '1px solid gainsboro', marginBottom: '10px' }} title={'选择城市'} icon={<EnvironmentOutline width='25px' height='25px' color='white' style={{ backgroundColor:'rgb(88, 190, 108)',boxSizing:'content-box',borderRadius:'50%'}} />} isLink onClick={()=>{nav('/city')}}></Cell>  
      <div className='adds'>
        <p style={{ fontSize: '14px', display: 'flex', alignItems: 'center' }}><GuideO width='25px' height='25px' color='rgb(88, 190, 108)' /> 选择当前定位地址</p>
        <div>{address}<span style={{ float: 'right', padding: '0 10px', color: 'rgb(88, 190, 108)' }} onClick={()=>{ setGetAddress(false) }}>重新定位</span></div>
        {!getAddress&&<iframe src='position.html' title='address' height='0px/'></iframe>}
      </div>
      <p>收货地址</p>
      <div className='addls'>
        {
          addLs.map((ele,i) => (
            <div className='addre' key={i}>
              <p className='area' onClick={(e) => { setAddress(e.target.innerHTML); }}>{ele.address}</p>
              <p className='tel'><span>{ele.name}</span><span>{ele.tel }</span></p>
            </div>
          ))
        }
        
        {/* <div className='addre'>
          <p className='area' onClick={(e) => { setAddress(e.target.innerHTML); }}>xxx市xx区xxx街道0615号</p>
          <p className='tel'><span>name</span><span>telllllllllll</span></p>
        </div>
        <div className='addre'>
          <p className='area'  onClick={(e) => {setAddress(e.target.innerHTML);}}>xxx市xx区xxx街道0615号</p>
          <p className='tel'><span>name</span><span>telllllllllll</span></p>
        </div> */}
      </div>
      <button onClick={()=>{}}>+新增收货地址</button>
    </div>
  )
}
